import React from "react";
import {connect} from "react-redux";
import './rankingList.scss';
import { GetRankListDet } from "../../api/rankingList/rankingList";
import { Avatar, Space, Button, Row, Col } from 'antd';
import {CaretRightOutlined, RightOutlined} from '@ant-design/icons';
import { withRouter } from "react-router";


class RankingListPage extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            rankList: [],
        };
        this.GetRankingList = this.GetRankingList.bind(this);
    }

    componentDidMount() {
        this.GetRankingList();
    }

    GetRankingList(){
        GetRankListDet().then(res => {
            const { code, list } = res;
            if(code === 200){
                this.setState({
                    rankList: list,
                })
            }else {

            }
        }).catch(() => {

        })
    }

    CreateOfficialList(){
        const { rankList } = this.state;
        const officialList = [];
        if(rankList.length > 0){
            let newlist = rankList.filter(r => r.ToplistType);
            newlist.map((r,index) => {
                let musiclist = [];
                r.tracks.map((item,itemIndex) => {
                    musiclist.push(
                        <div className="song_item" key={itemIndex}>
                            <Space>
                                <span className="key">{ itemIndex + 1 }</span>
                                <span className="name">{ item.first }</span>
                            </Space>
                            <span className="artists">{ item.second }</span>
                        </div>
                    )
                })
                officialList.push(
                    <div key={index} className="Official_Item">
                        <div className="Avatar_Box">
                            <Avatar shape="square" size={175} src={r.coverImgUrl} />
                        </div>
                        <div className="Hot_list">
                            {musiclist}
                            <Button type={"text"} className="seeAll">查看全部 <RightOutlined /></Button>
                        </div>
                    </div>
                )
            })
        }

        return officialList;
    }

    CompCount(value){
        if(parseInt(value) > 10000){
            return parseInt(value/10000) + '万'
        }else {
            return value
        }
    }

    showPlayListDet(id){
        this.props.history.push('/PlayList/'+ id);
    }

    CreateGlobalList(){
        const { rankList } = this.state;
        const GlobalList = [];
        if(rankList.length > 0){
            let newList = rankList.filter(r => !r.ToplistType);
            newList.forEach((r,index) => {
                GlobalList.push(
                    <Col className="playlist_col">
                        <div onClick={() =>this.showPlayListDet(r.id)} key={index} itemID={r.id} className="HotRecommend-item">
                            <div className="coverImg">
                                <img src={r.coverImgUrl} alt="" />
                                <div className="Enter-Item">
                                    <CaretRightOutlined/>
                                </div>
                            </div>

                            <p className="item-title">{r.name}</p>
                            <span className="palyCount">
                              <CaretRightOutlined/>{this.CompCount(r.playCount)}
                            </span>

                        </div>
                    </Col>
                )
            })
        }
        return GlobalList;
    }

    render() {
        return (
            <div className="RankingListPage">
                <div className="official_list">
                    <div className="title">
                        <span>官方榜</span>
                    </div>
                    <div className="List_box">
                        {this.CreateOfficialList()}
                    </div>
                </div>
                <div className="global_list">
                    <div className="title">
                        <span>全球榜</span>
                    </div>
                    <Row className="List_box" gutter={24}>
                        {this.CreateGlobalList()}
                    </Row>
                </div>
            </div>
        )
    }
}


export default connect()(withRouter(RankingListPage));